<template>
  <div class="box">
    <div class="header">入住申请表</div>
    <el-descriptions title="" :column="5" border>
      <el-descriptions-item
        label="姓名"
        label-align="center"
        align="center"
        width="100px"
        >李建刚</el-descriptions-item
      >
      <el-descriptions-item
        label="性别"
        label-align="right"
        align="center"
        width="70px"
        >女</el-descriptions-item
      >
      <el-descriptions-item
        label="出生年月"
        label-align="right"
        align="center"
        width="100px"
        >1972-12-12</el-descriptions-item
      >
      <el-descriptions-item
        label="民族"
        label-align="right"
        align="center"
        width="70px"
        >汉
      </el-descriptions-item>
      <el-descriptions-item label="" label-align="right" align="center">
      </el-descriptions-item>
      <el-descriptions-item
        label="现住址"
        label-align="center"
        align="center"
        span="2.5"
        >宁夏银川市金凤区</el-descriptions-item
      >
      <el-descriptions-item
        label="原住址"
        label-align="right"
        align="center"
        width="100px"
        >宁夏银川市兴庆市</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions title="" border>
      <el-descriptions-item
        label="证件号码"
        label-align="center"
        width="100px"
        align="center"
        span="1"
        >640102197212121234</el-descriptions-item
      >
    </el-descriptions>
    <el-descriptions title="" :column="3" border>
      <el-descriptions-item
        label="委托人"
        label-align="center"
        align="center"
        width="100px"
        >李铁钢</el-descriptions-item
      >
      <el-descriptions-item
        label="和入住人关系"
        label-align="right"
        align="center"
        span="1.5"
        >母女</el-descriptions-item
      >
      <el-descriptions-item label="联系电话" label-align="right" align="center"
        >13000000012</el-descriptions-item
      >
      <el-descriptions-item label="家庭住址" label-align="right" align="center"
        >宁夏银川市金凤区
      </el-descriptions-item>
      <el-descriptions-item
        label="单位"
        label-align="right"
        align="center"
        label-width="100px"
      >
        宁夏银川市金凤区
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="" border>
      <el-descriptions-item
        label="证件号码"
        label-align="center"
        width="100px"
        align="center"
        span="1"
        >640102197212121234</el-descriptions-item
      >
    </el-descriptions>
    <div class="header" style="font-size: 18px">社会关系</div>
    <!-- <el-descriptions title="" :column="5" border direction="vertical" size="mini">
      <el-descriptions-item
        label="姓名"
        label-align="center"
        align="center"
        width="100px"
        >
        </el-descriptions-item
      >
      <el-descriptions-item
        label="关系"
        label-align="center"
        align="center"
        width="100px"
        ></el-descriptions-item
      >
      <el-descriptions-item
        label="住址"
        label-align="center"
        align="center"
        width="100px"
        ></el-descriptions-item
      >
      <el-descriptions-item
        label="单位"
        label-align="center"
        align="center"
        width="100px"
        ></el-descriptions-item
      >
      <el-descriptions-item
        label="电话"
        label-align="center"
        align="center"
        width="100px"
        ></el-descriptions-item
      >
    </el-descriptions> -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="姓名" width="140" />
      <el-table-column prop="name" label="关系" width="140" />
      <el-table-column prop="address" label="住址" width="240" />
      <el-table-column prop="address" label="单位" width="140" />
      <el-table-column prop="address" label="电话" width="140" />
    </el-table>
    <div style="display: flex">
      <div class="left">
        <el-descriptions title="" border>
          <el-descriptions-item
            label="病史"
            label-align="center"
            width="140px"
            span="1"
            >腿脚不好，摔过</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions title="" border>
          <el-descriptions-item
            label="入住人（或亲属）签名盖手印"
            label-align="center"
            width="140px"
            span="1"
          ></el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" border>
          <el-descriptions-item
            label=""
            label-align="center"
            width="140px"
            align="right"
            span="1"
          >
            <span class="item">年</span>
            <span class="item">月</span>
            <span class="item"> 日</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="right">照片</div>
    </div>
    <p
      style="
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ebeef5;
        line-height: 40px;
        font-size: 13px;
      "
    >
      注：凡因对病史有所隐瞒所产生的一切后果，均有家属自行负责
    </p>
    <el-descriptions title="" border>
      <el-descriptions-item
        label="授权监护人"
        label-align="center"
        width="140px"
        align="right"
        :column="3"
        span="1"
      >
      </el-descriptions-item>
      <el-descriptions-item
        label="病号"
        label-align="center"
        width="140px"
        align="right"
        :column="3"
        span="1"
      >
      </el-descriptions-item>
      <el-descriptions-item
        label="中心负责人"
        label-align="center"
        width="140px"
        align="right"
        :column="3"
        span="1"
      >
      </el-descriptions-item>
    </el-descriptions>
    <div>
        <div class="left1" style="width: 134px;border-right: 1px solid #ebeef5;height: 290px; text-align: center;line-height: 290px;">备注</div>
        <div class="right1"></div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>
  
  <style  scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 800px;
  height: 1200px;
  border: 1px solid gray;
  margin: auto;
}

.box1 {
  width: 100px;
  height: 50px;
  border: 1px solid gray;
}

.header {
  width: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  height: 50px;
  background-color: #f3f6f9;
}
.item {
  margin: 40px;
}
.left {
  width: 560px;
}
.right {
  text-align: center;
  line-height: 145px;
  height: 145px;

  width: 240px;
  border-bottom: 1px solid #ebeef5;
}
</style>